import { Component } from 'vue'

export interface RouteItem {
  /**
   * 路由url
   */
  path: string
  /**
   * vue组件
   */
  component?: Component
  /**
   * 名称
   */
  name?: string
  meta: {
    name: string
    /**
     * 是否显示
     */
    isShow: boolean
    /**
     * 图标
     */
    icon?: string
  }
  /**
   * 重定向地址
   */
  redirect?: string
  /**
   * 路由子项集合
   */
  children?: RouteItem[]
}

export type RouteItemList = RouteItem[]

/**
 * 常量路由:所有用户都可访问
 */
export const constantRoute: RouteItemList = [
  //登录
  {
    path: '/login', //路由url
    component: () => import('@/views/login/index.vue'), //引入页面
    name: 'login', //路由名
    meta: {
      name: '登录',
      isShow: false,
    },
  },
  //首页
  {
    path: '/',
    component: () => import('@/layout/index.vue'),
    name: 'layout',
    meta: {
      name: '',
      isShow: true,
    },
    redirect: '/home',
    children: [
      {
        path: '/home',
        component: () => import('@/views/home/index.vue'),
        meta: {
          name: '首页',
          isShow: true,
          icon: 'HomeFilled',
        },
      },
    ],
  },
  //数据大屏
  {
    path: '/screen',
    component: () => import('@/views/screen/index.vue'),
    name: 'Screen',
    meta: {
      name: '数据大屏',
      isShow: true,
      icon: 'Platform',
    },
  },
  //404
  {
    path: '/404',
    component: () => import('@/views/404/index.vue'),
    name: '404',
    meta: {
      name: '404',
      isShow: false,
    },
  },
]
//异步路由
export const asyncRoute: RouteItemList = [
  //权限管理
  {
    path: '/acl',
    component: () => import('@/layout/index.vue'),
    name: 'Acl',
    meta: {
      name: '权限管理',
      isShow: true,
      icon: 'Lock',
    },
    children: [
      {
        path: '/acl/user',
        component: () => import('@/views/acl/user/index.vue'),
        name: 'Acl', //这边可能出错了？
        meta: {
          name: '用户管理',
          isShow: true,
          icon: 'User',
        },
      },
      {
        path: '/acl/role',
        component: () => import('@/views/acl/role/index.vue'),
        name: 'Role',
        meta: {
          name: '角色管理',
          isShow: true,
          icon: 'UserFilled',
        },
      },
      {
        path: '/acl/menu',
        component: () => import('@/views/acl/menu/index.vue'),
        name: 'Permission',
        meta: {
          name: '菜单管理',
          isShow: true,
          icon: 'Monitor',
        },
      },
    ],
  },
  //商品管理
  {
    path: '/product',
    component: () => import('@/layout/index.vue'),
    name: 'Product',
    meta: {
      name: '商品管理',
      isShow: true,
      icon: 'Goods',
    },
    children: [
      {
        path: '/product/trademark',
        component: () => import('@/views/product/trademark/index.vue'),
        name: 'Trademark',
        meta: {
          name: '品牌管理',
          isShow: true,
          icon: 'ShoppingCartFull',
        },
      },
      {
        path: '/product/attr',
        component: () => import('@/views/product/attr/index.vue'),
        name: 'Attr',
        meta: {
          name: '属性管理',
          isShow: true,
          icon: 'ChromeFilled',
        },
      },
      {
        path: '/product/spu',
        component: () => import('@/views/product/spu/index.vue'),
        name: 'Spu',
        meta: {
          name: 'SPU管理',
          isShow: true,
          icon: 'Calendar',
        },
      },
      {
        path: '/product/sku',
        component: () => import('@/views/product/sku/index.vue'),
        name: 'Sku',
        meta: {
          name: 'SKU管理',
          isShow: true,
          icon: 'Smoking',
        },
      },
    ],
  },
]
//任意路由
export const randomRoute: RouteItem = {
  path: '/:pathMach(.*)*',
  redirect: '/404',
  name: 'Any',
  meta: {
    name: '默认',
    isShow: false,
  },
}
